<template>
	<div>
		<div class="header">
			<div class="icon-left" @click="$router.goBack()"><img src="../../static/img/icon/release_icon/return@2x.png"/></div>
			管理收货地址
			<div class="null"></div>
		</div>
		<div class="header-null"></div>
		<div class="address-list">
			<div class="address-list-item"   v-for="(item, index) in list">
				<div class="address-list-item-top">
					<div class="address-list-item-top-title">
						<div>收货人：{{item.consignee}}</div>
						<div>电话:{{item.contactWay}}</div>
					</div>
					<div class="address-list-item-top-content">
						收货地址：{{item.contactAddress}}
					</div>
				</div>
				<div class="address-list-item-bottom">
					<div @click.stop="add(item.UserAddressID)">
						<img v-if="1" src="../../static/img/icon/release_icon/weixuanzhong@2x.png"/>
						<img v-else src="../../static/img/icon/release_icon/nextstep@2x.png"/>
						默认地址
					</div>
					<div>
						<div @click.stop="route('editAddress', '', '', item.UserAddressID)">
							<img src="../../static/img/icon/find_icon/guanli.png"/>
							编辑
						</div>
						<div @click.stop="deleted(item.UserAddressID)">
							<img src="../../static/img/icon/find_icon/del.png"/>
							删除
						</div>
					</div>
				</div>
			</div>
			<!-- <div class="address-list-item" v-for="(item, index) in list">
				<div class="address-list-item-top">
					<div class="address-list-item-top-title">
						<div>收货人：{{item.consignee}}</div>
						<div>{{item.contactWay}}</div>
					</div>
					<div class="address-list-item-top-content">
						收货地址：{{item.province}}{{item.city}}{{item.district}}{{item.contactAddress}}
					</div>
				</div>
				<div class="address-list-item-bottom">
					<div @click.stop="add(item.UserAddressID)">
						<img v-if="item.isDefaultAddress == 0" src="../../static/img/icon/release_icon/weixuanzhong@2x.png"/>
						<img v-else src="../../static/img/icon/release_icon/nextstep@2x.png"/>
						默认地址
					</div>
					<div>
						<div @click.stop="route('editAddress', '', '', item.UserAddressID)">
							<img src="../../static/img/icon/find_icon/guanli.png"/>
							编辑
						</div>
						<div @click.stop="deleted(item.UserAddressID)">
							<img src="../../static/img/icon/find_icon/del.png"/>
							删除
						</div>
					</div>
				</div>
			</div> -->
		</div>
		<div class="address-addFixed" @click="route('newsAddress')">
			<div>
				<img src="../../static/img/icon/home_icon/attention@2x.png"/>
				新增收货地址
			</div>
		</div>
	</div>
</template>

<script>
	import {getData} from '../service/getData'
	export default {
		data() {
			return {
				check: false,
				list: []
			}
		},
		methods: {
			init() {  //默认加载
				this.$store.state.isLoading = true
				getData('/useraddress/getAddressByUserIdApi', {
					userId: sessionStorage.userId,
				}).then(d => {
					this.$store.state.isLoading = false
					this.list = d.addressList
				}).catch(err => {
					this.$store.state.isLoading = false
					console.log(err)
				})
			},
			add(id) {  
                 let that=this;
			//设置默认地址
				getData('/useraddress/settingDefaultApi', {
					UserAddressID: id
				}).then(d => {
					if(d.code == 1) {						
						that.$Message.success(d.msg);
						setInterval(function(){
							location.reload();
						},500)
					} else {
						alert(d.msg)
					}
				})
			},
			deleted(id) {  //删除地址
				this.$store.state.isLoading = true
				getData('/useraddress/delUserAddressApi', {
					UserAddressID: id
				}).then(d => {
					this.$store.state.isLoading = false
					if(d.code == 1) {						
						location.reload()
					} else {
						alert(d.msg)
					}
				}).catch(err => {
					this.$store.state.isLoading = false
					console.log(err)
				})
			}
		},
		mounted() {
			this.init()
		}
	}
</script>

<style scoped lang="less">
	.address-list {
		
		.address-list-item {
			margin-bottom: 10px;
			background: #fff;
			
			.address-list-item-top {
				padding: 15px 10px 5px;
				border-bottom: 1px solid #eee;
				
				.address-list-item-top-title {
					font-size: 14px;
					display: flex;
					margin-bottom: 5px;
					justify-content: space-between;
					
					div:nth-child(2) {
						font-weight: bold;
					}
				}
				
				.address-list-item-top-content {
					font-size: 12px;
				}
			}
			
			.address-list-item-bottom {
				padding: 10px 10px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 12px;
				
				div:nth-child(1) {
					display: flex;
					align-items: center;
					
					
					img {
						width: 15px;
						height: 15px;
						margin-right: 5px;
					}
				}
				
				div:nth-child(2) {
					display: flex;
					align-items: center;
					
					div:nth-child(1) {
						margin-right: 25px;
					}
					
					img {
						width: 15px;
						height: 15px;
						margin-right: 5px;
					}
				}
				
			}
		}
	}
	
	.address-addFixed {
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: center;
		padding: 10px 0;
		background: #fff;
		
		div {
			display: flex;
			align-items: center;
		}
		
		img {
			width: 20px;
			height: 20px;
			margin-right: 10px;
		}
	}
</style>